/**
 * webpack
 * 是一种用于前端项目自动构建发布的工具
 * 自动构建的工作包括:兼容性处理、语法转换、合并、打包、压缩、优化等等
 * 比较适合单页面应用，项目的结构也需要符合webpack的要求。
 * webpack要求项目需要有两个文件，一个入口文件，一个webpack.config.js(nodejs模块),默认情况下有一个
 * src目录用于存放源代码包括入口文件，项目打包好以后还有一个构建目录默认叫build
 * 
 * 工作流程简介:
 * 1.根据入口文件，梳理各个文件之间的依赖关系，把相关的同类型文件打包成chunk块，比如所有js文件打包成一个js块。
 * 2.对每个块进行兼容性，语法转换等处理
 * 3.进行打包、压缩、优化等工作
 * 4.输出打包好的文件
 * 
 * 核心配置（5个）：
 * entry：配置入口文件的路径和名称
 * output：配置打包之后的文件，存放到哪个目录里
 * module：用于配置完成语法兼容转换等问题的加载器(loader),默认支持js和json文件，这两种文件处理不需要加载器
 * plugins：插件，用于完成打包压缩优化等工作
 * mode：模式---
 * 开发模式(development)和产品模式(production)，开发模式下不需要进行打包压缩优化等工作提高开发的效率，产品模式下就需要全部工作都做完。
 */
 
const path=require("path")
 const HtmlWebpackPlugin=require("html-webpack-plugin")
 const {CleanWebpackPlugin}=require("clean-webpack-plugin")
 const isProd=process.env.NODE_ENV==="production";//如果是产品模式会赋值true，反之赋值false
 module.exprots={
     entry:{app:path.resolve("src","main.ts")},//入口
     output:{
         path:path.resolve("dist"),
         filename:"{name}{contenthash:8}.js"
     },//输出
     mode:"development",//开发环境
     module:{
         roles:[
             {
                 test:/.tsx?$/,   //正则表达式匹配tsx结尾的
                 use:"ts-loader", //使用该加载器处理
                 include:[path.resolve("src")]   //处理的目录
             }
         ]
     },//加载器
     plugins:[
         new HtmlWebpackPlugin({
             template:path.resolve("public","index.html")
         }),
         new CleanWebpackPlugin()
     ],//插件
     devServer:{
         host:"localhost",
         port:8088,
         stats:true,
         open:true//自动开启浏览器
     },//开发服务
     resolve:{
         //入口文件导入这三种文件不用写后缀名
         extensions:[".ts",".js",".tsx"]
     },
     devtool:isProd ? "cheap-module-source-map" : "cheap-module-eval-source-map"
 }